<template>
  <!-- 最外层容器 -->
  <div>
    <Header />
  <div>
    
  <div class="SearchContainer">
    <!-- 头部 -->
    <div class="header">
      <div class="title">
        <div class="title-text"> 搜索意中人</div>
        <div class="search">
          <input @input="handleShow" @keyup.enter="handleSearch" v-model="inpValue" class="search-input" placeholder="输入ID或昵称精准搜索" type="text" id="">
          <div @click="handleSearch" class="search-icon iconfont iconxingtaiduICON_sousuo--"></div>
          <div class="searchCase" :style="isShow?'display:block':'display:none'">
            <div class="searchCaseItem" @click="handleSearchUser(item.nickname)" v-for="item in showSearchName" :key="item.id">{{item.nickname}}</div>
          </div>
        </div>
      </div>

      <!-- 头部下半部分 -->
      <el-card>
        <el-form ref="form" label-width="80px">
          <el-form-item label="热门标签 :" style="fontsize:200px">
            <el-button @click="getSearchListData(index)" style="fontSize:14px" size="small " round :class="currentBtnIndex === index?'header-but':''" v-for="(label,index) in searchList.list" :key="label.iconFlag">{{label.iconTitle}}</el-button>
          </el-form-item>

          <el-form-item label="基本条件 :">
            <el-select class="form-select one" v-model="form.sex" placeholder="性别">
              <el-option label="女" value="women"></el-option>
              <el-option label="男" value="man"></el-option>
            </el-select>
            <el-select class="form-select two" v-model="form.age" placeholder="请选择年龄">
              <el-option label="20" value="20"></el-option>
              <el-option label="25" value="25"></el-option>
            </el-select>
            <el-select class="form-select two" v-model="form.value" placeholder="请选择地区">
              <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-option-group>
            </el-select>
            <el-select class="form-select two" v-model="form.money" placeholder="月收入不限">
              <el-option label="5000-10000" value="1w"></el-option>
              <el-option label="10000-15000" value="1-1.5W"></el-option>
              <el-option label="15000-20000" value="1.5-2w"></el-option>
            </el-select>
            <el-select class="form-select two" v-model="form.education" placeholder="学历不限">
              <el-option label="大专以下" value="dazhuanyixia"></el-option>
              <el-option label="大专" value="dazhuan"></el-option>
              <el-option label="本科" value="benke"></el-option>
              <el-option label="研究生" value="yanjiusheng"></el-option>
            </el-select>
          </el-form-item>
          <!-- 高级搜索 -->
          <el-form-item label="高级搜索 :">
            <el-select class="form-select one" v-model="form.profession" placeholder="职业">
              <el-option :disabled="true" label="幼师" value="teacher"></el-option>
              <el-option :disabled="true" label="护士" value="nause"></el-option>
            </el-select>
            <el-select class="form-select one" v-model="form.origo" placeholder="籍贯">
              <el-option :disabled="true" label="广东" value="guangdong"></el-option>
              <el-option :disabled="true" label="福建" value="fujian"></el-option>
              <el-option :disabled="true" label="北京" value="beijing"></el-option>
            </el-select>
            <el-select class="form-select three" v-model="form.marriage" placeholder="婚姻情况">
              <el-option :disabled="true" label="未婚" value="weihun"></el-option>
              <el-option :disabled="true" label="离异" value="liyi"></el-option>
            </el-select>
            <el-select class="form-select three" v-model="form.chilren" placeholder="有无孩子">
              <el-option :disabled="true" label="有" value="have"></el-option>
              <el-option :disabled="true" label="无" value="none"></el-option>
            </el-select>
          </el-form-item>
          <div class="header-btn-container">
            <el-button @click="handleScreenSearch" class="header-btn">搜索</el-button>
          </div>

        </el-form>
      </el-card>
    </div>

    <!-- Tab显示 -->

    <div class="TabsContainer">
      <div class="TabsContainer-item" @click="toDetail(userInfo.objectID)" v-for="(userInfo,index) in list" :key="index">
        <div class="TabsImg-container">
          <img class="TabsContainer-item-img" v-lazy="userInfo.avatarURL" alt="">
        </div>
        <div class="name">
          <span class="nickName">{{userInfo.nickname}}</span>
          <div style="color:gold" class="nickName-icom iconfont iconhuangguan"></div>
          <div style="color:purple" class="nickName-icom iconfont iconxingxing"></div>
          <div style="color:green" class="nickName-icom iconfont iconmingpian"></div>
        </div>
        <div class="tag">
          <span v-for="(item,index) in userInfo.advantageMsgList" :key="index">{{item}}</span>
        </div>
        <div class="word">{{userInfo.introduceContent}}</div>
      </div>

    </div>
  </div>
  <Footer v-if="!$route.meta.isHideFooter" />
  </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Search',
  data() {
    return {
      form: {
        sex: '',
        // 地区的值
        value: '',
        money: '',
        // 职业
        profession: '',
        // 籍贯
        origo: '',
        // 婚姻
        marriage: '',
        chilren: '',
        // 学历
        education: '',
      },
      // 地区
      options: [{
        label: '热门城市',
        options: [{
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }]
      }, {
        label: '城市名',
        options: [{
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Dalian',
          label: '大连'
        }]
      }],
      currentBtnIndex: 0,
      inpValue: '',
      // 原数据的复制数据
      oldList: [],

      // 展示的数据，经过切割长度的
      list: [],
      // 输入框显示与否
      isShow: false

    }
  },
  methods: {
    ...mapActions(['getSearchLabelList', 'getConditionList', 'getScreenMan', 'getScreenWomen']),


    // 点击搜索框显示出来的下拉框内的名字
    handleSearchUser(name) {
      // console.log('handleSearchUser');
      // 根据输入的信息进行搜索
      const searchUser = this.conditionList.list.find((item) => {
        return item.nickname === name
      })

      // console.log(searchUser)
      // 因为不能改原数据，所以把复制数据改了
      this.list = [{ ...searchUser }]

      this.isShow = false
      // 选中哪个名字，inputValue也要显示对应的名字
      this.inpValue = name
    },

    // 搜索Input输入内容后做的事
    handleShow() {
      // console.log("handleShow");
      const { inpValue } = this
      // 输入搜索信息后就要显示搜索的内容
      this.isShow = true
      // 如果没有值就要隐藏
      if (!inpValue) this.isShow = false
    },

    // 处理滚动条，滚动条到底就重新渲染出新的数据
    handleScroll() {
      // 系统滚动条高度
      let scrollTop = document.documentElement.scrollTop

      // 判断到了对应的高度就加载下面的15个图
      if (scrollTop >= 760 && scrollTop <= 1900) {
        const count = 30
        this.list = this.oldList.slice(0, count)
      }
      else if (scrollTop >= 1900 && scrollTop <= 3000) {
        const count = 45
        this.list = this.oldList.slice(0, count)
      }
      else if (scrollTop >= 3000) {
        const count = 60
        this.list = this.oldList.slice(0, count)
      }

      // console.log(scrollTop);

    },


    // 筛选条件搜索
    handleScreenSearch() {
      // console.log(this.form.sex)
      const { sex } = this.form
      if (sex === "women") {
        // 筛选条件为女，就发送请求请求女的数据
        this.getScreenWomen()
      } else if (sex === "man") {
        this.getScreenMan()
      }
    },


    // 跳转到详情页
    toDetail(userId) {
      // console.log(userId);
      // 跳转到detail页面
      this.$router.history.push({
        path: "/detail",
        query: {
          userId
        }
      })
    },
    // 点击标签要获取对应的信息
    getSearchListData(index) {
      // 点击对应的标签会获取样式
      this.currentBtnIndex = index

      if (index > 2) return
      // 然后会发送请求获取数据
      this.getConditionList(index)
    },

    // 点击搜索框
    handleSearch() {
      // console.log(this)
      const { inpValue } = this
      // console.log(inpValue)
      // 如果没输入内容点击搜索，就搜索挂载时的数据
      if (!inpValue) {
        this.getConditionList(0)
      }
      // 根据输入的信息进行搜索
      const searchUser = this.conditionList.list.find((item) => {
        return item.nickname === inpValue
      })
      // 计算属性 这里没有使用
      // const searchUser =  this.getSearchData(inpValue)
      console.log(searchUser)
      // 因为不能改原数据，所以把复制数据改了
      this.list = [{ ...searchUser }]
      // 点击搜索或者回车就把搜索详情框隐藏
      this.isShow = false
    },
  },
  computed: {
    ...mapState({
      searchList: (state) => state.search.searchList,
      conditionList: (state) => state.search.conditionList,
    }),
    // ...mapGetters(['getSearchData']),

    // 搜索到的用户显示
    showSearchName() {
      const { oldList, inpValue } = this
      if (!inpValue) return
      // 找出和输入内容一下信息的进行遍历
      const res = oldList.filter((item) => {
        return item.nickname.startsWith(inpValue)
      })
      // console.log(res);
      return res

    }

  },
  mounted() {
    // 获取标签信息
    this.getSearchLabelList()
    // 组件加载就显示猜你喜欢的数据
    this.getConditionList(0)

    // 挂载完成就获取滚动条位置
    window.addEventListener("scroll", this.handleScroll)

  },
  watch: {
    // 监视数据，以来就复制一份，用于以后点击搜索的时候使用
    conditionList() {
      // 保存原数据
      this.oldList = this.conditionList.list
      // 上来先获取三十条数据
      this.list = this.conditionList.list.slice(0, 15)
    }
  }
}
</script>

<style lang="stylus" scoped>
.SearchContainer
  margin 0 auto
  width 1200px
  padding-top 100px
  // border 1px solid yellowgreen
  vertical-align baseline
  .header
    font-size 14px
    border 1px solid #ebebeb
    .title
      display flex
      justify-content space-between
      align-items center
      height 60px
      padding-left 30px
      padding-right 14px
      border-bottom 1px solid #ebebeb
      margin-bottom 14px
      .title-text
        font-size 16px
        padding-left 8px
        border-left 4px solid #a187f9
        font-weight 700
        color #333
      .search
        display flex
        width 210px
        position relative
        .searchCase
          border 1px solid gray
          width 208px
          height 200px
          position absolute
          bottom -200px
          // display none
          background-color #fff
          z-index 99
        .searchCaseItem
          height 30px
          line-height 30px
          padding-left 10px
          // border 1px solid gray
        .search-input
          display block
          width 100%
          background-color #f4f4f4
          outline none
          border-radius 4px
          height 32px
          padding-left 10px
        .search-icon
          position absolute
          right 20px
          top 8px
          width 20px
          height 20px
          background center center no-repeat
  .header-but
    background-color #a187f9
  .form-select
    margin-left 10px
  .form-select.one
    width 100px
  .form-select.two
    width 150px
  .form-select.three
    width 120px
  .header-btn-container
    position relative
    vertical-align middle
    height 40px
    .header-btn
      position absolute
      bottom 0
      left 50%
      transform translateX(-50%)
      background-color #a187f9
      border-radius 4px
      width 346px
      height 40px
      vertical-align middle
      line-height 40px
      white-space nowrap
      padding 0 20px
      text-align center
      color #fff
  .TabsContainer
    margin-top 20px
    display flex
    flex-wrap wrap
    border 1px solid #efefef
    .TabsContainer-item
      margin 10px 10px
      background #fff
      border 1px solid #efefef
      box-sizing border-box
      width 18%
      height 359px
      cursor pointer
      overflow hidden
      .TabsImg-container
        width 100%
        height 200px
        position relative
        .TabsContainer-item-img
          position absolute
          left 50%
          top 50%
          transform translate(-50%, -50%)
          width 184px
          height 184px
          background center center no-repeat
          background-size 100% 100%
      .name
        display flex
        align-items center
        width 182px
        height 39px
        .nickName
          padding-left 18px
          overflow hidden
          max-width 115px
          height 27px
          line-height 27px
          vertical-align middle
          font-size 16px
          word-break break-all
          font-weight 700
          color #333
        .nickName-icom
          padding-left 10px
          width 15px
          height 15px
      .tag
        padding-left 18px
        height 50px
        overflow hidden
        span
          display inline-block
          height 19px
          padding 0 8px
          border-radius 4px
          margin 0 6px 8px 0
          border 1px solid #8b76f9
          font-size 12px
          line-height 16px
          text-align center
          color #8b76f9
      .word
        padding-left 18px
        overflow hidden
        width 182px
        height 40px
        margin-top 7px
        font-size 14px
        line-height 20px
        word-break break-all
        color #666
</style>
